<template>
  <div class="community-container">
    <div class="header">
      <h2>社区帖子管理</h2>
      <button class="create-btn" @click="showCreateForm = true">创建新帖子</button>
    </div>

    <!-- 创建帖子表单 -->
    <div class="create-form-container" v-if="showCreateForm">
      <div class="create-form">
        <h3>创建新帖子</h3>
        <div class="form-group">
          <label>帖子标题:</label>
          <input type="text" v-model="newPost.title" placeholder="请输入帖子标题" />
        </div>
        <div class="form-group">
          <label>帖子内容:</label>
          <textarea v-model="newPost.content" placeholder="请输入帖子内容" rows="5"></textarea>
        </div>
        <div class="form-group">
          <label>分类:</label>
          <select v-model="newPost.categoryId">
            <option value="">请选择分类</option>
            <option v-for="category in categories" :key="category._id" :value="category._id">
              {{ category.name }}
            </option>
          </select>
        </div>
        <div class="form-group">
          <label>封面图片URL:</label>
          <input type="text" v-model="newPost.coverImage" placeholder="请输入封面图片URL" />
        </div>
        <div class="form-group">
          <label>视频URL:</label>
          <input type="text" v-model="newPost.videoUrl" placeholder="请输入视频URL（支持MP4、YouTube、Bilibili等多种格式）" />
          <small class="form-text">支持格式：MP4/WebM/AVI等直接视频文件、YouTube、Bilibili、Vimeo等平台链接</small>
        </div>
        <div class="form-group">
          <label>作者ID:</label>
          <input
            type="text"
            v-model="newPost.authorId"
            placeholder="请输入有效的ObjectId格式作者ID"
          />
          <small class="form-text"
            >必须是有效的MongoDB ObjectId格式 (例如: 507f1f77bcf86cd799439011)</small
          >
        </div>
        <div class="form-actions">
          <button class="cancel-btn" @click="showCreateForm = false">取消</button>
          <button class="submit-btn" @click="createPost">提交</button>
        </div>
      </div>
    </div>

    <!-- 编辑帖子表单 -->
    <div class="create-form-container" v-if="showEditForm">
      <div class="create-form">
        <h3>编辑帖子</h3>
        <div class="form-group">
          <label>帖子标题:</label>
          <input type="text" v-model="editPost.title" placeholder="请输入帖子标题" />
        </div>
        <div class="form-group">
          <label>帖子内容:</label>
          <textarea v-model="editPost.content" placeholder="请输入帖子内容" rows="5"></textarea>
        </div>
        <div class="form-group">
          <label>分类:</label>
          <select v-model="editPost.categoryId">
            <option value="">请选择分类</option>
            <option v-for="category in categories" :key="category._id" :value="category._id">
              {{ category.name }}
            </option>
          </select>
        </div>
        <div class="form-group">
          <label>封面图片URL:</label>
          <input type="text" v-model="editPost.coverImage" placeholder="请输入封面图片URL" />
        </div>
        <div class="form-group">
          <label>视频URL:</label>
          <input type="text" v-model="editPost.videoUrl" placeholder="请输入视频URL（支持多种格式）" />
        </div>
        <div class="form-actions">
          <button class="cancel-btn" @click="showEditForm = false">取消</button>
          <button class="submit-btn" @click="updatePost">保存修改</button>
        </div>
      </div>
    </div>

    <!-- 帖子列表 -->
    <div class="post-list">
      <table>
        <thead>
          <tr>
            <th>发布时间</th>
            <th>封面</th>
            <th>标题</th>
            <th>内容预览</th>
            <th>视频</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item._id" class="post-item">
            <td>{{ formatDate(item.createdAt) }}</td>
            <td class="cover-cell">
              <img v-if="item.coverImage" :src="item.coverImage" alt="封面" class="cover-image" @error="handleImageError" />
              <span v-else class="no-cover">无封面</span>
            </td>
            <td class="post-title">{{ item.title }}</td>
            <td class="post-content">{{ truncateContent(item.content) }}</td>
            <td class="video-cell">
              <div v-if="item.videoUrl" class="video-container">
                <video v-if="isVideoFile(item.videoUrl)" :src="item.videoUrl" controls class="video-list-player" preload="metadata" muted>
                  您的浏览器不支持视频播放
                </video>
                <iframe v-else-if="isEmbedVideo(item.videoUrl)" :src="getEmbedUrl(item.videoUrl)" class="video-list-player" frameborder="0" allowfullscreen></iframe>
                <div v-else class="video-link">
                  <div class="video-link-btn" @click="watchVideo(item.videoUrl)">查看视频</div>
                </div>
              </div>
              <span v-else class="no-video">无视频</span>
            </td>
            <td class="actions">
              <button class="view-btn" @click="openEditForm(item)">修改</button>
              <button class="delete-btn" @click="deletePost(item._id)">删除</button>
              <button v-if="item.videoUrl" class="watch-btn" @click="watchVideo(item.videoUrl)">查看视频</button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="list.length === 0" class="empty-message">暂无帖子数据</div>
    </div>

    <!-- 视频观看模态框 -->
    <div class="video-modal-container" v-if="showVideoModal">
      <div class="video-modal">
        <div class="video-modal-header">
          <h3>视频播放</h3>
          <button class="close-btn" @click="closeVideoModal">×</button>
        </div>
        <div class="video-modal-content">
          <video v-if="isVideoFile(currentVideoUrl)" :src="currentVideoUrl" controls autoplay class="modal-video">
            您的浏览器不支持视频播放
          </video>
          <iframe v-else-if="isEmbedVideo(currentVideoUrl)" :src="getEmbedUrl(currentVideoUrl)" class="modal-video" frameborder="0" allowfullscreen></iframe>
          <div v-else class="external-video">
            <video :src="currentVideoUrl" controls autoplay class="modal-video" @error="handleVideoError">
              <p>无法播放此视频格式</p>
              <p>视频链接：{{ currentVideoUrl }}</p>
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      showCreateForm: false,
      showEditForm: false,
      categories: [],
      authors: [],
      newPost: {
        title: '',
        content: '',
        categoryId: '',
        coverImage: '',
        videoUrl: '',
        authorId: '',
      },
      editPost: {
        id: '',
        title: '',
        content: '',
        categoryId: '',
        coverImage: '',
        videoUrl: '',
      },
      showVideoModal: false,
      currentVideoUrl: ''
    }
  },
  methods: {
    get() {
      return axios
        .get('http://47.94.6.186:3001/admin/community/list', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log('获取到的帖子列表:', res.data.data.list)
          this.list = res.data.data.list

          // 检查每个帖子的分类ID
          this.list.forEach((post) => {
            console.log(`帖子 ${post.title} 的分类ID: ${post.categoryId}`)
          })

          return this.list
        })
        .catch((error) => {
          console.error('获取帖子列表失败:', error)
          return []
        })
    },

    createPost() {
      // 表单验证
      if (
        !this.newPost.title ||
        !this.newPost.content ||
        !this.newPost.categoryId ||
        !this.newPost.authorId
      ) {
        alert('请填写必填字段：标题、内容、分类和作者ID')
        return
      }

      // 验证作者ID是否符合ObjectId格式（24位十六进制字符串）
      const objectIdRegex = /^[0-9a-fA-F]{24}$/
      if (!objectIdRegex.test(this.newPost.authorId)) {
        alert('作者ID必须是有效的ObjectId格式（24位十六进制字符串）')
        return
      }

      axios
        .post(
          'http://47.94.6.186:3001/admin/community/create',
          {
            title: this.newPost.title,
            content: this.newPost.content,
            categoryId: this.newPost.categoryId,
            coverImage: this.newPost.coverImage,
            videoUrl: this.newPost.videoUrl,
            authorId: this.newPost.authorId,
          },
          {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          },
        )
        .then((res) => {
          console.log(res.data)
          alert('帖子创建成功')
          this.showCreateForm = false
          // 重置表单
          this.newPost = {
            title: '',
            content: '',
            categoryId: '',
            coverImage: '',
            videoUrl: '',
            authorId: '',
          }
          this.get() // 刷新列表
        })
        .catch((error) => {
          console.error('创建帖子失败:', error)
          alert('创建帖子失败，请检查网络连接或表单数据')
        })
    },

    // 获取分类列表
    getCategories() {
      return new Promise((resolve, reject) => {
        axios
          .get('http://47.94.6.186:3001/admin/post-category/list', {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          })
          .then((res) => {
            console.log('获取到的分类数据:', res.data.data.list)
            this.categories = res.data.data.list
            resolve(this.categories)
          })
          .catch((error) => {
            console.error('获取分类列表失败:', error)
            reject(error)
          })
      })
    },

    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleString()
    },

    // 截断内容预览
    truncateContent(content) {
      return content.length > 50 ? content.substring(0, 50) + '...' : content
    },

    // 获取分类名称
    getCategoryName(categoryId) {
      if (!categoryId) return '无分类'

      // 打印调试信息
      console.log('查找分类:', categoryId)
      console.log('可用分类:', this.categories)

      const category = this.categories.find((c) => c._id === categoryId)
      return category ? category.name : '未知分类'
    },

    // 打开编辑表单
    openEditForm(post) {
      this.editPost = {
        id: post._id,
        title: post.title,
        content: post.content,
        categoryId: post.categoryId,
        coverImage: post.coverImage || '',
        videoUrl: post.videoUrl || '',
      }
      this.showEditForm = true
    },

    // 更新帖子
    updatePost() {
      // 表单验证
      if (!this.editPost.title || !this.editPost.content || !this.editPost.categoryId) {
        alert('请填写必填字段：标题、内容和分类')
        return
      }

      axios
        .put(
          `http://47.94.6.186:3001/admin/community/update/${this.editPost.id}`,
          {
            title: this.editPost.title,
            content: this.editPost.content,
            categoryId: this.editPost.categoryId,
            coverImage: this.editPost.coverImage,
            videoUrl: this.editPost.videoUrl,
          },
          {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          },
        )
        .then((res) => {
          console.log('更新帖子响应:', res.data)
          alert('帖子更新成功')
          this.showEditForm = false
          this.get() // 刷新列表
        })
        .catch((error) => {
          console.error('更新帖子失败:', error)
          alert('更新帖子失败，请检查网络连接或表单数据')
        })
    },

    // 删除帖子
    deletePost(postId) {
      if (confirm('确定要删除这篇帖子吗？')) {
        axios
          .delete(`http://47.94.6.186:3001/admin/community/delete/${postId}`, {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          })
          .then((res) => {
            console.log('删除帖子响应:', res.data)
            alert('删除帖子成功')
            this.get() // 刷新列表
          })
          .catch((error) => {
            console.error('删除帖子失败:', error)
            alert('删除帖子失败，请检查网络连接')
          })
      }
    },

    // 处理图片加载错误
    handleImageError(event) {
      console.log('图片加载失败:', event.target.src)
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      const noImageSpan = parent.querySelector('.no-cover')
      if (noImageSpan) {
        noImageSpan.style.display = 'inline-block'
      }
    },

    // 查看视频
    watchVideo(videoUrl) {
      this.currentVideoUrl = videoUrl
      this.showVideoModal = true
    },

    // 关闭视频模态框
    closeVideoModal() {
      this.showVideoModal = false
      this.currentVideoUrl = ''
    },

    // 判断是否为直接视频文件
    isVideoFile(url) {
      if (!url) return false
      const videoExtensions = ['.mp4', '.webm', '.ogg', '.avi', '.mov', '.wmv', '.flv', '.mkv', '.m4v', '.3gp']
      const lowerUrl = url.toLowerCase()
      return videoExtensions.some(ext => lowerUrl.includes(ext)) || lowerUrl.includes('blob:')
    },

    // 判断是否为可嵌入的视频平台
    isEmbedVideo(url) {
      if (!url) return false
      const embedPlatforms = ['youtube.com', 'youtu.be', 'bilibili.com', 'vimeo.com', 'dailymotion.com']
      return embedPlatforms.some(platform => url.includes(platform))
    },

    // 获取嵌入式视频URL
    getEmbedUrl(url) {
      if (!url) return ''

      // YouTube
      if (url.includes('youtube.com/watch')) {
        const videoId = url.split('v=')[1]?.split('&')[0]
        return `https://www.youtube.com/embed/${videoId}`
      }
      if (url.includes('youtu.be/')) {
        const videoId = url.split('youtu.be/')[1]?.split('?')[0]
        return `https://www.youtube.com/embed/${videoId}`
      }

      // Bilibili
      if (url.includes('bilibili.com/video/')) {
        const bvid = url.match(/BV[a-zA-Z0-9]+/)?.[0]
        if (bvid) {
          return `https://player.bilibili.com/player.html?bvid=${bvid}&high_quality=1`
        }
      }

      // Vimeo
      if (url.includes('vimeo.com/')) {
        const videoId = url.split('vimeo.com/')[1]?.split('?')[0]
        return `https://player.vimeo.com/video/${videoId}`
      }

      // 其他情况直接返回原URL
      return url
    },

    // 添加测试数据
    addTestData() {
      if (this.list.length === 0) {
        this.list = [
          {
            _id: 'test1',
            title: '测试帖子 - MP4视频',
            content: '这是一个测试帖子，包含标准MP4格式视频，支持直接播放。',
            coverImage: 'https://i2.hdslb.com/bfs/archive/49a787f4c9c4b0c4c5c8c9c0c1c2c3c4c5c6c7c8.jpg',
            videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
            createdAt: new Date().toISOString(),
            categoryId: 'test-category'
          },
          {
            _id: 'test2',
            title: '测试帖子 - YouTube视频',
            content: '这个帖子包含YouTube视频链接，支持嵌入播放。',
            coverImage: 'https://via.placeholder.com/300x200/FF0000/white?text=YouTube',
            videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
            createdAt: new Date(Date.now() - 86400000).toISOString(),
            categoryId: 'test-category'
          },
          {
            _id: 'test3',
            title: '测试帖子 - Bilibili视频',
            content: '这个帖子包含Bilibili视频链接，支持嵌入播放。',
            coverImage: 'https://via.placeholder.com/300x200/00A1D6/white?text=Bilibili',
            videoUrl: 'https://www.bilibili.com/video/BV1xx411c7mD',
            createdAt: new Date(Date.now() - 172800000).toISOString(),
            categoryId: 'test-category'
          },
          {
            _id: 'test4',
            title: '测试帖子 - 外部视频链接',
            content: '这个帖子包含外部视频链接，将在新窗口中打开。',
            coverImage: 'https://via.placeholder.com/300x200/9C27B0/white?text=External',
            videoUrl: 'https://example.com/video.avi',
            createdAt: new Date(Date.now() - 259200000).toISOString(),
            categoryId: 'test-category'
          },
          {
            _id: 'test5',
            title: '测试帖子 - WebM格式',
            content: '这个帖子包含WebM格式的视频文件，支持现代浏览器播放。',
            coverImage: '',
            videoUrl: 'https://sample-videos.com/zip/10/webm/SampleVideo_1280x720_1mb.webm',
            createdAt: new Date(Date.now() - 345600000).toISOString(),
            categoryId: 'test-category'
          }
        ]

        // 添加测试分类
        if (this.categories.length === 0) {
          this.categories = [
            { _id: 'test-category', name: '测试分类' }
          ]
        }
      }
    }
  },
  mounted() {
    // 先获取分类，再获取帖子列表，确保分类数据已加载
    this.getCategories()
      .then(() => {
        this.get()
      })
      .catch((error) => {
        console.error('初始化数据失败:', error)
        // 即使分类加载失败，也尝试加载帖子列表
        this.get()
        // 如果API请求失败，添加一些测试数据用于演示
        this.addTestData()
      })
  },
}
</script>
<style scoped>
.community-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.create-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.create-btn:hover {
  background-color: #1565c0;
}

/* 创建帖子表单样式 */
.create-form-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.create-form {
  background-color: white;
  padding: 24px;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.create-form h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.form-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.cancel-btn {
  background-color: #9e9e9e;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cancel-btn:hover {
  background-color: #757575;
}

.submit-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background-color: #43a047;
}

/* 帖子列表样式 */
.post-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f5f5f5;
}

th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
}

tbody tr {
  border-bottom: 1px solid #f0f0f0;
}

tbody tr:hover {
  background-color: #f9f9f9;
}

td {
  padding: 15px;
  color: #555;
  vertical-align: top;
}

.post-title {
  font-weight: 500;
  color: #333;
}

.post-content {
  color: #666;
  font-size: 14px;
  max-width: 300px;
}

.cover-cell {
  min-width: 100px;
  max-width: 150px;
  text-align: center;
  position: relative;
  padding: 10px;
}

.cover-image {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #eee;
  display: block;
  margin: 0 auto;
}

.cover-image:error {
  display: none;
}

.no-cover {
  color: #999;
  font-size: 12px;
  font-style: italic;
  display: inline-block;
}

/* 视频相关样式 */
.video-cell {
  width: 200px;
  text-align: center;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-list-player {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
  background-color: #f5f5f5;
}

.video-link {
  width: 180px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.video-link-btn {
  color: #007bff;
  text-decoration: none;
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid #007bff;
  border-radius: 4px;
  transition: all 0.2s;
  cursor: pointer;
  background-color: white;
  display: inline-block;
}

.video-link-btn:hover {
  background-color: #007bff;
  color: white;
}

.no-video {
  color: #999;
  font-size: 12px;
  font-style: italic;
  display: inline-block;
  padding: 20px;
}

.actions {
  white-space: nowrap;
}

.view-btn,
.delete-btn,
.watch-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-right: 5px;
  transition: background-color 0.2s;
}

.view-btn {
  background-color: #2196f3;
  color: white;
}

.view-btn:hover {
  background-color: #1e88e5;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #e53935;
}

/* 查看视频按钮样式 */
.watch-btn {
  background-color: #ff5722;
  color: white;
  margin-left: 5px;
}

.watch-btn:hover {
  background-color: #f4511e;
}

/* 视频模态框样式 */
.video-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.video-modal {
  background-color: white;
  border-radius: 8px;
  width: 80%;
  max-width: 900px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  background-color: #f8f9fa;
}

.video-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #e9ecef;
  color: #333;
}

.video-modal-content {
  padding: 20px;
  background-color: #000;
}

.modal-video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  min-height: 400px;
  border-radius: 4px;
}

.external-video {
  text-align: center;
  padding: 40px;
  color: #666;
  background-color: #fff;
}

.external-video p {
  margin-bottom: 20px;
  font-size: 16px;
}

.external-video-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.external-video-btn:hover {
  background-color: #0056b3;
}

.empty-message {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .create-form {
    padding: 16px;
  }

  th,
  td {
    padding: 10px 8px;
    font-size: 14px;
  }

  .post-content {
    max-width: 150px;
  }

  .video-cell {
    width: 150px;
  }

  .video-list-player {
    width: 130px;
    height: 80px;
  }

  .video-modal {
    width: 98%;
    max-width: none;
    margin: 5px;
    max-height: 98vh;
  }

  .modal-video {
    max-height: 75vh;
    min-height: 250px;
  }

  .actions {
    white-space: normal;
  }

  .watch-btn {
    margin-top: 5px;
    margin-left: 0;
  }
}
</style>
